<template>
	<view class="container">
		<view class="logo-content">
			<text class="title">政企客户现场巡检报告</text>
		</view>
		
		<view class="form-content">
			
			<!-- 客户基本信息 -->
			<view class="info-card">
				<view class="card-title">
					
				</view>
				
				<view class="input-item xrequired flex align-center">
					<view class="iconfont icon icon-jihua"></view>
					<input v-model="checkForm.customerName" class="input" type="text" 
					:placeholder="baseInfo.customerNameText" maxlength="30" />
				</view>
				
				<view class="input-item xrequired flex align-center">
					<view class="iconfont icon icon-jihua"></view>
					<input v-model="checkForm.address" class="input" type="text" 
					:placeholder="baseInfo.address" maxlength="30" />
				</view>
				
				<view class="input-item xrequired flex align-center">
					<view class="iconfont icon icon-jihua"></view>
					<input v-model="checkForm.checkTime" class="input" type="text" 
					:placeholder="baseInfo.checkTime" maxlength="30" />
				</view>
				
				<view class="input-item xrequired flex align-center">
					<view class="iconfont icon icon-jihua"></view>
					<input v-model="checkForm.deptName" class="input" type="text" 
					:placeholder="baseInfo.deptName" maxlength="30" />
				</view>
				
				<view class="input-item xrequired flex align-center">
					<view class="iconfont icon icon-jihua"></view>
					<input v-model="checkForm.checkMan" class="input" type="text" 
					:placeholder="baseInfo.checkMan" maxlength="30" />
				</view>
				
				<view class="input-item xrequired flex align-center">
					<view class="iconfont icon icon-jihua"></view>
					<input v-model="checkForm.phone" class="input" type="text" 
					:placeholder="baseInfo.phone" maxlength="30" />
				</view>
				
				<!-- 客户业务 -->
				<view class="input-item xrequired flex align-center">
					<view class="iconfont icon icon-jihua"></view>
					
	<!-- 				<input v-model="checkForm.business" class="input" type="text" 
						@click="chooseBusiness" :disabled="true" placeholder="请选择客户业务" maxlength="30" /> -->
					<!-- <u-picker :show="showChooseBusiness" ref="uPicker" :localdata="businessColumns" keyName="label"
						@confirm="confirmBusiness" @cancel="cancelBusiness" @change="changeBusiness">
					</u-picker> -->
					<uni-data-picker :localdata="businessColumns" popup-title="请选择客户业务" 
						@change="onchange" @nodeclick="onnodeclick">
					</uni-data-picker>
				</view>
			</view>
			
			<!-- 机房环境检查 -->
			<view class="info-card">
				<view class="input-item checkbox-card xrequired flex align-center">
					<view class="text">机房温度20度，湿度40%</view>
					<uni-data-checkbox class="choose-btn" v-model="server_temp_humi" :localdata="state"></uni-data-checkbox>
				</view>
				
				<view class="input-item checkbox-card xrequired flex align-center">
					<view class="text">机柜防尘防鼠、接地情况</view>
					<uni-data-checkbox class="choose-btn" v-model="rack_rat_ground" :localdata="state"></uni-data-checkbox>
				</view>
				
				<view class="input-item checkbox-card1 xrequired flex align-center">
					<view class="text">设备固定，且安装空间需保证各维护模块(单板、风扇、电源模块等)可正常运行及维护</view>
					<uni-data-checkbox class="choose-btn" v-model="rack_device" :localdata="state"></uni-data-checkbox>
				</view>
			</view>
			
			<!-- 设备运行状况检查 -->
			<view class="info-card">
			</view>
			
			<!-- 设备连接情况检查 -->
			<view class="info-card">
			</view>
			
			<!-- 巡检总结 -->
			<view class="info-card">
			</view>
			
			<!-- 与客户访谈记录 -->
			<view class="info-card">
			</view>
			
			<!-- 客户满意度 -->
			<view class="info-card">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				globalConfig: getApp().globalData.config,
				// 注册form
				checkForm: {
				  customerName: "",
				  address: "",
				  checkTime: "",
				  deptName: "",
				  checkMan: "",
				  phone: "",
				  business: "",
				},
				baseInfo: {
					customerNameText: "请输入客户名称",
					address: "巡检地点",
					checkTime: "巡检时间",
					deptName: "巡检部门",
					checkMan: "巡检人员",
					phone: "联系电话",
					business: "客户业务",
				},
				// 所属社区
				showChooseBusiness: false,
				businessColumns: [
					{
						text: "语音",
						value: "0"
					},
					{
						text: "组网专线",
						value: "1"
					},
					{
						text: "互联网",
						value: "2"
					},
					{
						text: "其他",
						value: "3"
					},
				],
				server_temp_humi: 0,
				rack_rat_ground: 0,
				rack_device: 0,
				state: [{
					text: '正常',
					value: 0
				}, {
					text: '异常',
					value: 1
				}],
			}
		},
		methods: {
			
			// 确认选择所属社区
			chooseBusiness() {
				this.showChooseBusiness = true;
			},
			
			cancelBusiness() {
				this.showChooseBusiness = false;
			},
			
			confirmBusiness(e) {
				console.log(e);
			},
			
			changeBusiness(e) {
				console.log(e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100%;
		
		.logo-content {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 24px;
			
			.title {
				line-height: 24px;
			}
		}
		
		.form-content {
			width: 100%;
			height: 100%;
			font-size: 21px;
			text-align: center;
			margin: 10px auto;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 8px;
			
			.info-card {
				width: calc(100% - 18px);
				// height: 100%;
				border-radius: 8px;
				background-color: pink;
				
				.title {
					background-color: red;
				}
				
				.input-item {
					margin: 14px auto;
					background-color: #f5f6f7;
					height: 45px;
					border-radius: 20px;
				
					.icon {
					  font-size: 38rpx;
					  margin-left: 10px;
					  color: #999;
					}
				
					.input {
					  width: 100%;
					  font-size: 14px;
					  line-height: 20px;
					  text-align: left;
					  padding-left: 15px;
					}
					
					.text {
						font-size: 14px;
					}
				}
				
				.checkbox-card {
					width: 100%;
					height: 60px;
					// background-color: green;
					display: flex;
					flex-direction: column;
					
					.text {
						padding-left: 12px;
						padding-right: 12px;
						width: 100%;
						// background-color: red;
						display: flex;
						justify-content: left;
						font-size: 20px;
					}
					
					.choose-btn {
						width: 100%;
						// background-color: black;
						display: flex;
						justify-content: right;
					}
				}
				
				.checkbox-card1 {
					width: 100%;
					height: 100px;
					// background-color: green;
					display: flex;
					flex-direction: column;
					
					.text {
						padding-left: 12px;
						padding-right: 12px;
						width: 100%;
						// background-color: red;
						display: flex;
						justify-content: left;
						font-size: 20px;
					}
					
					.choose-btn {
						width: 100%;
						// background-color: black;
						display: flex;
						justify-content: right;
					}
				}
			}
		}
	}
</style>
